import React, { Component } from "react";
import {
  View,
  StyleSheet,
  ActivityIndicator,
  Text,
  Platform,
  Image
} from "react-native";
import {deviceHeight, deviceWidth} from "src/util"
import RootSiblings from "react-native-root-siblings"
import RootToast from "react-native-root-toast"


let sibling = undefined;

const Layer = {
  toast: null,

  showLongMsg: function(msg, type, options) {
    this.hiddenLoading(); //得到回调，隐藏loading
    let toast = RootToast.show(
      Platform.OS === "android" ? (
        <View style={styles.container}>
          {/*此处根据弹框类型选择icon或者image*/}
          {type == "success" ? (
            <Image
              source={require("src/assets/success.png")}
              style={{
                width: 50,
                height: 50
              }}
              resizeMode="contain"
            />
          ) : (
            <Image
              source={require("src/assets/isNotConnected.png")}
              style={{
                width: 50,
                height: 50
              }}
              resizeMode="contain"
            />
          )}
          <Text style={styles.message}>{msg}</Text>
        </View>
      ) : (
        msg
      ),
      {
        duration: 3000,
        position: RootToast.positions.CENTER,
        ...options,
        backgroundColor: "rgba(0, 0, 0, 0.8)"
      }
    );
    setTimeout(function() {
      RootToast.hide(toast);
      typeof options === "function" ? options && options() : null;
    }, 2500);
  },


  showMsg: function(msg, type, options) {
    this.hiddenLoading(); //得到回调，隐藏loading
    let toast = RootToast.show(
        
        msg
      ,
      {
        duration: 2500,
        position: RootToast.positions.CENTER,
        ...options,
        backgroundColor: "rgba(0, 0, 0, 0.8)"
      }
    );
    setTimeout(function() {
      RootToast.hide(toast);
      typeof options === "function" ? options && options() : null;
    }, 2000);
  },

  showLoading: function() {
    sibling = new RootSiblings(
      (
        <View style={styles.maskStyle}>
          <View style={styles.backViewStyle}>
            <ActivityIndicator size="large" color="white" />
            <Text
              style={{
                fontSize: 18,
                color: 'white',
                marginTop: 15
              }}
            >
              请稍候...
            </Text>
          </View>
        </View>
      )
    );
    setTimeout(function() {
      sibling.destroy();
    }, 30000);
  },

  hiddenLoading: () => {
    if (sibling instanceof RootSiblings) {
      sibling.destroy();
    }
  }
};

const styles = StyleSheet.create({
  maskStyle: {
    position: "absolute",
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    width: deviceWidth,
    height: deviceHeight+100,
    alignItems: "center",
    justifyContent: "center"
  },
  backViewStyle: {
    backgroundColor: "rgba(0, 0, 0, 0.6)",
    width: 150,
    height: 150,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5
  },
  container: {
    minWidth: 100,
    maxWidth: 350,
    minHeight: 90,
    alignItems: "center",
    justifyContent: "center"
  },
  message: {
    color: "#fff",
    marginTop: 10,
    textAlign: "center",
    fontSize: 14
    // lineHeight: Theme.autoHeight.px20,
  }
});

export default Layer;
